<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    drawImage(img)
    一共三种操作方式，如果不在服务器环境下，src中写正常图片地址是不能用的

    三个参数
    将完整的图片绘制在canvas的对应的位置
    drawImage(img, 0, 0)
  
    五个参数
    将完整的图片绘制在canvas的对应的位置，可以设置绘制后的宽高，图片不会被裁切，只会压缩

    九个参数
    先选择图片中的某一块，然后绘制到canvas的对应位置，可以设置绘制后的宽高


    FileReader
      需要new FileReader得到对象

      f.readAsDataURL() 可以获取到file对象的内容读取成base64格式

      f.onload = function () {
        this.result就是读取的结果
      }

    input.files

   -->
</body>
</html>